<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.分别用原始模式，工厂模式，构造函数模式创建一个盒子对象。要求如下
        //(1)对象有以下属性：宽度(数字类型，默认单位为cm) ，高度(同宽度) ，背景颜色，位置。长度单位可选mm（毫米）, cm(厘米) ，dm(分米), m(米)
        //(2)盒子对象的宽度，高度可设置带长度单位的字符串，对象会自动转换成cm。如: 设置box.width = '1.2m'，获取box.width返回不带单位的数字120，也可直接设置数字。提示Object.defineproperties，查询文档或者上课案例。
        // (3)有方法getSize()获取盒子大小。返回数字，默认平方厘米。
        //原始模式
        let box1 = {
            _width: 100,
            height: 100,
            backgroundColor: "red",
            getSize: function () {
                return this.width * this.height
            }
        }
        box1.width = "12.1cm" //box1.width:120
        box1.width = "1.1m" // box1.widdth:110
        box1.width = "13dm" //box1.widdth:130
        box1.width = "13mm" //1.3
        Object.defineProperties(box1, {
            //定义属性width
            width: {
                //当获取对象的width属性的时候，调用下面这个函数 
                get() {
                    return this._width
                },
                //当设置对象的width属性的时候，调用下面的函数
                set(s) {
                    //判断赋值变量是否是数字
                    if (!isNaN(s)) {
                        this._width = s
                    } else if (typeof s == "string") {
                        //如果赋值变量是否是字符串
                        let w;
                        //判断是否以cm结尾
                        if (s.endsWith('cm')) {
                            //获取里面的数字
                            w = parseFloat(s)
                        } else if (s.endsWith('mm')) {
                            w = parseFloat(s) * 0.1
                        } else if (s.endsWith('dm')) {
                            w = parseFloat(s) * 10
                        } else if (s.endsWith('m')) {
                            w = parseFloat(s) * 100
                        } else {
                            //如果不符合规范就抛出一个错误
                            throw "你输入的长度格式不符合规范"
                        }
                        this._width = w
                    } else {
                        throw "你输入的长度格式不符合规范"
                    }

                }
            }
        })
        //工厂模式
        function createBox(width, height, backgroundColor) {
            let box = new Object()
            Object.defineProperties(box, {
                width: {
                    get() {
                        return this._width
                    },
                    set(s) {
                        if (!isNaN(s)) {
                            this._width = s
                        } else if (typeof s == "string") {
                            let w;
                            if (s.endsWith('cm')) {
                                w = parseFloat(s)
                            } else if (s.endsWith('mm')) {
                                w = parseFloat(s) * 0.1
                            } else if (s.endsWith('dm')) {
                                w = parseFloat(s) * 10
                            } else if (s.endsWith('m')) {
                                w = parseFloat(s) * 100
                            } else {
                                throw "你输入的长度格式不符合规范"
                            }
                            this._width = w
                        } else {
                            throw "你输入的长度格式不符合规范"
                        }

                    }
                },
                height: {
                    get() {
                        return this._height
                    },
                    set(s) {
                        if (!isNaN(s)) {
                            this._height = s
                        } else if (typeof s == "string") {
                            let w;
                            if (s.endsWith('cm')) {
                                w = parseFloat(s)
                            } else if (s.endsWith('mm')) {
                                w = parseFloat(s) * 0.1
                            } else if (s.endsWith('dm')) {
                                w = parseFloat(s) * 10
                            } else if (s.endsWith('m')) {
                                w = parseFloat(s) * 100
                            } else {
                                throw "你输入的长度格式不符合规范"
                            }
                            this._height= w
                        } else {
                            throw "你输入的长度格式不符合规范"
                        }

                    }
                }
            })
            box.width = width
            box.height = height
            box.backgroundColor = backgroundColor
            box.getSize = function () {
                return box.width * box.height
            }
            return box
        }
        let box2 = createBox("1.52m","1.4dm","green")

        // 构造函数模式
        function Box(width,height,backgroundColor){
            Object.defineProperties(this, {
                width: {
                    get() {
                        return this._width
                    },
                    set(s) {
                        if (!isNaN(s)) {
                            this._width = s
                        } else if (typeof s == "string") {
                            let w;
                            if (s.endsWith('cm')) {
                                w = parseFloat(s)
                            } else if (s.endsWith('mm')) {
                                w = parseFloat(s) * 0.1
                            } else if (s.endsWith('dm')) {
                                w = parseFloat(s) * 10
                            } else if (s.endsWith('m')) {
                                w = parseFloat(s) * 100
                            } else {
                                throw "你输入的长度格式不符合规范"
                            }
                            this._width = w
                        } else {
                            throw "你输入的长度格式不符合规范"
                        }

                    }
                },
                height: {
                    get() {
                        return this._height
                    },
                    set(s) {
                        if (!isNaN(s)) {
                            this._height = s
                        } else if (typeof s == "string") {
                            let w;
                            if (s.endsWith('cm')) {
                                w = parseFloat(s)
                            } else if (s.endsWith('mm')) {
                                w = parseFloat(s) * 0.1
                            } else if (s.endsWith('dm')) {
                                w = parseFloat(s) * 10
                            } else if (s.endsWith('m')) {
                                w = parseFloat(s) * 100
                            } else {
                                throw "你输入的长度格式不符合规范"
                            }
                            this._height= w
                        } else {
                            throw "你输入的长度格式不符合规范"
                        }
                    }
                }
            })
            this.width = width;
            this.height = height;
            this.backgroundColor = backgroundColor;
            this.getSize = function(){
                return this.width*this.height
            }
        }

        let box3 = new Box("131cm","1.5m",'blue')

    </script>
</body>

</html>